<template>
  <div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image.img" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div style="margin-bottom: 3rem">
    <van-grid :border="false" :column-num="2">
      <van-grid-item v-for="(item, index) in  videoList" :key="index" @click="tocart(item)">
        <van-image :src="item.img" />
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script lang="ts">
import {defineComponent, getCurrentInstance, ref} from 'vue';
import {useStore} from 'vuex'
export default defineComponent({
  name: 'HomeTop',
  setup() {
    const {proxy}: any = getCurrentInstance()
    const images = ref<any>(null)
    const videoList = ref<any>(null)
    const store = useStore()
    function getSourse() {
      proxy.$http.get('/api/homePhoto').then((res: any) => {
        if(res.data.code === 1) {
          images.value = res.data.data[0].bannerList
          videoList.value = res.data.data[1].videoList
        }
      }).catch((error: any) => {
        console.log(error)
      })
    }
    function tocart(item: any) {
      proxy.$toast.success('成功添加到购物车')
      store.commit("tocart", item)
      // store.commit("getcart")
    }
    getSourse()
    return {
      images,
      videoList,
      tocart
    }
  }
})
</script>
<style scoped>
img {
  width: 100%;
}
</style>